<div class="registry-form">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="username">账号</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="username" id="username">
        <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">请输入账号
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" id="password" formControlName="password"
               (ngModelChange)="updateConfirmValidator()">
        <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password" formControlName="checkPassword" id="checkPassword">
        <nz-form-explain *ngIf="validateForm.get('checkPassword').dirty && validateForm.get('checkPassword').errors">
          <ng-container *ngIf="validateForm.get('checkPassword').hasError('required')">
            请确认密码
          </ng-container>
          <ng-container *ngIf="validateForm.get('checkPassword').hasError('confirm')">
            两次密码输入不一致
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>
          <span>
            用户名
            <nz-tooltip nzTitle="What do you want other to call you">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input id="nickname" formControlName="nickname">
        <nz-form-explain *ngIf="validateForm.get('nickname').dirty && validateForm.get('nickname').errors">请输入用户名
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <!--<nz-form-item>-->
      <!--<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号</nz-form-label>-->
      <!--<nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">-->
        <!--<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">-->
          <!--<ng-template #addOnBeforeTemplate>-->
            <!--<nz-select formControlName="telPrefix" style="width: 70px;">-->
              <!--<nz-option nzLabel="+86" nzValue="+86"></nz-option>-->
              <!--<nz-option nzLabel="+87" nzValue="+87"></nz-option>-->
            <!--</nz-select>-->
          <!--</ng-template>-->
          <!--<input formControlName="tel" id="'tel'" nz-input>-->
        <!--</nz-input-group>-->
        <!--<nz-form-explain *ngIf="validateForm.get('tel').dirty && validateForm.get('tel').errors">请输入手机号-->
        <!--</nz-form-explain>-->
      <!--</nz-form-control>-->
    <!--</nz-form-item>-->
    <!--<nz-form-item>-->
    <!--<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>Captcha</nz-form-label>-->
    <!--<nz-form-control [nzSm]="14" [nzXs]="24">-->
    <!--<div nz-row [nzGutter]="8">-->
    <!--<div nz-col [nzSpan]="12">-->
    <!--<input nz-input formControlName="captcha" id="captcha">-->
    <!--</div>-->
    <!--<div nz-col [nzSpan]="12">-->
    <!--<button nz-button (click)="getCaptcha($event)">Get captcha</button>-->
    <!--</div>-->
    <!--</div>-->
    <!--<nz-form-explain *ngIf="validateForm.get('captcha').dirty && validateForm.get('captcha').errors">Please input-->
    <!--the-->
    <!--captcha you got!-->
    <!--</nz-form-explain>-->
    <!--<nz-form-extra>We must make sure that your are a human.</nz-form-extra>-->
    <!--</nz-form-control>-->
    <!--</nz-form-item>-->
    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <label nz-checkbox formControlName="agree">
          <span>I have read the <a>agreement</a></span>
        </label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nz-row style="margin-bottom:8px;">
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button nzType="primary" [nzLoading]="isRegistryBtnLoading">注册</button>
        <button nz-button nzType="primary" style="margin-left: 10px;" routerLink="/login">返回</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
